<template>
  <div class="external" v-loading="loading">
    <div class="first">
      <div class="first-top">
        <div class="top-list" v-for="(item, index) in 3" :key="index">
          <div class="list-title">
            {{ index == 0 ? "商户号" : index == 1 ? "商户名" : "商户类别" }}
          </div>
          <div class="list-input">
            <el-input
              v-if="index == 0"
              v-model="merchantNo"
              clearable
              placeholder="请输入商户号"
            ></el-input>
            <el-input
              v-if="index == 1"
              v-model="merchantName"
              clearable
              placeholder="请输入商户名"
            ></el-input>
            <el-select
              clearable
              v-if="index == 2"
              v-model="merchantType"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in merchantTypesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="top-button">
          <div
            class="button"
            v-for="(item, index) in 2"
            :key="index"
            @click="walletFunction(index)"
          >
            {{ index == 0 ? "搜索" : "重置" }}
          </div>
        </div>
      </div>

      <div class="first-center">
        <div
          class="center"
          v-for="(item, index) in 1"
          :key="index"
          :style="{
            background: index == 1 ? '#0AC1C7' : index == 2 ? '#A9A9A9' : '',
          }"
          @click="walletMet(index)"
        >
          <img
            class="center-img"
            :src="
              index == 0
                ? require('../../assets/index/icon-7.png')
                : index == 1
                ? require('../../assets/index/icon-8.png')
                : require('../../assets/index/icon-9.png')
            "
            alt=""
          />
          <div class="center-title">
            {{ index == 0 ? "新增" : index == 1 ? "导出" : "删除" }}
          </div>
        </div>
      </div>

      <div class="first-bottom">
        <img class="bottom-img" src="../../assets/index/icon-10.png" alt="" />
        <div class="bottom-title">新增商户step：新增->进件->查询->签约</div>
        <div class="bottom-title" style="color: red">
          已进件的商户不可修改信息所以进件之前请确认商户信息无误
        </div>
        <div class="bottom-title" style="color: red">
          查询之后如出现商户号则可以点击签约
          签约链接会通过手机发送到联系人手机上面
        </div>
      </div>
    </div>

    <div class="second">
      <div class="second-table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            color: '#949494',
            backgroundColor: '#F9F9F9',
          }"
          @sort-change="sortChange"
        >
          <!-- 自定义暂无数据 -->
          <template slot="empty">
            <div class="empty-block">
              <img
                class="empty-block-img"
                src="../../assets/common/common-empty.png"
              />
              <div class="empty-block-text">暂无数据～</div>
            </div>
          </template>
          <el-table-column
            type="selection"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="merchantName"
            label="子商戶名"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="outMerchantNo"
            label="外部商戶号"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="merchantNo"
            label="商户号"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="" label="商户类型" width="200" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.merchantType == '01'"> 个体商户</span>
              <span v-if="scope.row.merchantType == '02'"> 企业商户</span>
              <span v-if="scope.row.merchantType == '03'"> 小微商户</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="bizAddress"
            label="地址"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="lawyerName"
            label="法人姓名"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="" label="余额" width="200" align="center">
            <template slot-scope="scope"> ￥{{ scope.row.money }} </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="一般消费类账户可提现金额"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ scope.row.cashAmount1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="待结算账户可提现金额"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ scope.row.cashAmount2 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            sortable
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="" label="商户类型" width="200" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.merchantType == '01'"> 个体商户</span>
              <span v-if="scope.row.merchantType == '02'"> 企业商户</span>
              <span v-if="scope.row.merchantType == '03'"> 小微商户</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="商户状态" width="200" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 'SUCCESS'"> 正常</span>
              <span v-if="scope.row.status == 'FAILED'"> 审核失败</span>
              <span v-if="scope.row.status == 'FROZEN'"> 关闭交易</span>
              <span v-if="scope.row.status == 'LOGOUT'"> 注销</span>
              <span v-if="scope.row.status == 'WAIT_APPROVE'"> 待审核</span>
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="电子合同签约状态"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.contractSignStatus == 'UNSIGN'">
                未签约</span
              >
              <span v-if="scope.row.contractSignStatus == 'PROCESSING'">
                签约中</span
              >
              <span v-if="scope.row.contractSignStatus == 'SUCCESS'">
                签约成功</span
              >
              <span v-if="scope.row.contractSignStatus == 'FAILED'">
                签约失败</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="400" align="center">
            <template slot-scope="scope">
              <div class="operation">
                <div
                  class="operation-list"
                  style="color: blue"
                  @click="walletOperation(4, scope.row)"
                >
                  编辑
                </div>
                <div
                  class="operation-list"
                  style="color: orangered"
                  @click="walletOperation(5, scope.row)"
                >
                  进件
                </div>
                <div
                  class="operation-list"
                  style="color: #0078fd"
                  @click="walletOperation(2, scope.row)"
                >
                  查询
                </div>
                <div
                  class="operation-list"
                  style="color: rosybrown"
                  @click="walletOperation(3, scope.row)"
                >
                  签约
                </div>
                <div
                  class="operation-list"
                  style="color: #1dc225"
                  @click="walletOperation(0, scope.row)"
                >
                  转账
                </div>
                <div
                    class="operation-list"
                    style="color: #1dc225"
                    @click="walletOperation(6, scope.row)"
                >
                  平台
                </div>
                <div
                  class="operation-list"
                  style="color: #0ac1c7"
                  @click="walletOperation(1, scope.row)"
                >
                  明细
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="second-pagination">
        <div class="pagination-left">共{{ totalNum }}条数据</div>

        <div class="pagination-right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper"
            :total="totalNum"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!--新增-->
    <div class="addtion">
      <el-dialog
        title=""
        :visible.sync="addtionDialogVisible"
        round
        width="80vw"
      >
        <div class="addtion-block">
          <div class="block-header">
            <div class="header-title">创建银盛商户</div>

            <img
              @click="addtionClose"
              class="header-close"
              src="../../assets/index/icon-11.png"
              alt=""
            />
          </div>
          <div class="block-center">
            <el-form :model="addModel" :rules="rules" ref="form">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="外部商户名" prop="outMerchantNo">
                    <el-input
                      v-model="addModel.outMerchantNo"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商户名" prop="merchantNo">
                    <el-input v-model="addModel.merchantNo" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商户类型" prop="merchantType">
                    <el-select v-model="addModel.merchantType" clearable>
                      <el-option
                        v-for="item in merchantTypesOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="商户名称" prop="merchantName">
                    <el-input v-model="addModel.merchantName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="商户简称" prop="merchantShortName">
                    <el-input v-model="addModel.merchantShortName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="营业执照号" prop="businessCode">
                    <el-input v-model="addModel.businessCode"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="营业执照全称" prop="businessName">
                    <el-input v-model="addModel.businessName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="营业执照起始日期" prop="businessExpire">
                    <el-input
                      v-model="addModel.businessExpire"
                      placeholder="格式：yyyyMMdd"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="营业执照失效日期" prop="businessFailure">
                    <el-input
                      v-model="addModel.businessFailure"
                      placeholder="格式：yyyyMMdd，长期填29991231"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="营业执照注册地址" prop="businessAddress">
                    <el-input v-model="addModel.businessAddress"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经营地址" prop="bizAddress">
                    <el-input v-model="addModel.bizAddress"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经营所在省" prop="province">
                    <el-input v-model="addModel.province"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="经营所在市" prop="city">
                    <el-input v-model="addModel.city"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经营所在区" prop="region">
                    <el-input v-model="addModel.region"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人姓名" prop="lawyerName">
                    <el-input v-model="addModel.lawyerName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="法人手机号" prop="lawyerPhone">
                    <el-input v-model="addModel.lawyerPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人证件起始日期" prop="lawyerIdExpired">
                    <el-input
                      v-model="addModel.lawyerIdExpired"
                      placeholder="格式：yyyyMMdd"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人证件结束日期" prop="lawyerIdFailure">
                    <el-input
                      v-model="addModel.lawyerIdFailure"
                      placeholder="格式：yyyyMMdd 长期填29991231"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="法人职业" prop="lawyerWork">
                    <el-select v-model="addModel.lawyerWork" clearable>
                      <el-option
                        v-for="item in lawyerWorkOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人性别" prop="lawyerSex">
                    <el-select v-model="addModel.lawyerSex" clearable>
                      <el-option
                        v-for="item in lawyerSexOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="法人地址" prop="lawyerAddress">
                    <el-input v-model="addModel.lawyerAddress"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="法人证件类型" prop="lawyerIdType">
                    <el-select v-model="addModel.lawyerIdType" clearable>
                      <el-option
                        v-for="item in lawyerIdTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结算账户卡类型" prop="accountCardType">
                    <el-select
                      v-model="addModel.accountCardType"
                      clearable
                      placeholder="企业商户仅支持对公借记卡"
                    >
                      <el-option
                        v-for="item in accountCardTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结算账户卡号" prop="accountCardno">
                    <el-input v-model="addModel.accountCardno"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="结算账户户名" prop="accountCardnoName">
                    <el-input v-model="addModel.accountCardnoName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户行省" prop="openAccProvince">
                    <el-input v-model="addModel.openAccProvince"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户行市" prop="openAccCity">
                    <el-input v-model="addModel.openAccCity"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="开户行区" prop="openAccArea">
                    <el-input v-model="addModel.openAccArea"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户行编号" prop="openAccBanktype">
                    <el-input v-model="addModel.openAccBanktype"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经办人姓名" prop="personName">
                    <el-input v-model="addModel.personName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="经办人证件号" prop="personId">
                    <el-input v-model="addModel.personId"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经办人手机号" prop="personPhone">
                    <el-input v-model="addModel.personPhone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="经办人联系邮箱" prop="personEmail">
                    <el-input v-model="addModel.personEmail"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="MCC码" prop="mccCode">
                    <el-input v-model="addModel.mccCode"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="结算方式" prop="settleType">
                    <el-select
                      v-model="addModel.settleType"
                      clearable
                      placeholder="结算方式"
                    >
                      <el-option
                        v-for="item in settleTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="营业执照图片" prop="businessPicUrl">
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download1"
                        :src="
                          addModel.businessPicUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.businessPicUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.businessPicUrl, 1)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'businessPicUrl',
                              'businessPic',
                              'upload1'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload1"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="结算账户卡正面"
                    prop="accountCardPicFrontUrl"
                  >
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download2"
                        :src="
                          addModel.accountCardPicFrontUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.accountCardPicFrontUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.accountCardPicFrontUrl, 2)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'accountCardPicFrontUrl',
                              'accountCardPicFront',
                              'upload2'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload2"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="法人证件正面图片"
                    prop="lawyerIdPicFrontUrl"
                  >
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download3"
                        :src="
                          addModel.lawyerIdPicFrontUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.lawyerIdPicFrontUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.lawyerIdPicFrontUrl, 3)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'lawyerIdPicFrontUrl',
                              'lawyerIdPicFront',
                              'upload3'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload3"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="法人证件反面图片"
                    prop="lawyerIdPicBackUrl"
                  >
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download4"
                        :src="
                          addModel.lawyerIdPicBackUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.lawyerIdPicBackUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.lawyerIdPicBackUrl, 4)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'businessPicUrl',
                              'businessPic',
                              'upload1'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload1"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="法人手持证件正面图片"
                    prop="lawyerIdHandFrontUrl"
                  >
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download5"
                        :src="
                          addModel.lawyerIdHandFrontUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.lawyerIdHandFrontUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.lawyerIdHandFrontUrl, 5)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'lawyerIdHandFrontUrl',
                              'lawyerIdHandFront',
                              'upload5'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload5"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="门头照图片" prop="doorFrontPicUrl">
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download6"
                        :src="
                          addModel.doorFrontPicUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.doorFrontPicUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.doorFrontPicUrl, 6)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'doorFrontPicUrl',
                              'doorFrontPic',
                              'upload6'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload6"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收银台照图片" prop="cashierPicUrl">
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download7"
                        :src="
                          addModel.cashierPicUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.cashierPicUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.cashierPicUrl, 7)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'cashierPicUrl',
                              'cashierPic',
                              'upload7'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload7"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="场景照图片" prop="scenePicUrl">
                    <div class="display-list">
                      <el-image
                        class="list-download"
                        ref="download8"
                        :src="
                          addModel.scenePicUrl == ''
                            ? require('../../assets/index/icon-16.png')
                            : addModel.scenePicUrl
                        "
                        :preview-src-list="prewUrlList"
                        :initial-index="0"
                        @click="previewMet(addModel.scenePicUrl, 8)"
                      ></el-image>

                      <el-upload
                        class="display-upload"
                        action="https://account.xmw1688.com/common/upload"
                        :on-success="
                          (response, file, fileList) => {
                            return handleSuccessList(
                              response,
                              file,
                              fileList,
                              'scenePicUrl',
                              'scenePic',
                              'upload8'
                            );
                          }
                        "
                        :show-file-list="false"
                        ref="upload8"
                      >
                        <div class="list-uploading">
                          <img
                            class="uploading-img"
                            src="../../assets/index/icon-7.png"
                            alt=""
                          />

                          <div class="uploading-title">上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>

        <el-button
          type="primary"
          @click="submitForm('form')"
          style="
            width: 400px;
            display: flex;
            justify-content: center;
            margin: 40px auto;
          "
          v-if="!isAdd"
          >提交</el-button
        >
      </el-dialog>
    </div>

    <!--转账-->
    <div class="transfer">
      <el-dialog title="" :visible.sync="transferDialogVisible" round>
        <div class="transfer-block">
          <div class="block-header">
            <div class="header-title">转账</div>
            <img
              @click="transferClose"
              class="header-close"
              src="../../assets/index/icon-11.png"
              alt=""
            />
          </div>

          <div class="block-center">
            <div class="center-list" v-for="(item, index) in 3" :key="index">
              <div class="list-left">
                {{ index == 0 ? "子商户号" : index == 1 ? "转账金额" :  index == 2 ? "个人钱包":"" }}
              </div>
              <div class="list-right">
                <el-input
                  v-if="index == 0"
                  v-model="payerMerchantNo"
                  readonly
                  clearable
                  placeholder="请输入子商户号"
                ></el-input>
                <el-input
                  v-if="index == 1"
                  v-model="transferPrice"
                  @input="
                    transferPrice = transferPrice.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
                  "
                  clearable
                  placeholder="请输入转账金额"
                ></el-input>
                <el-input
                    v-if="index == 2"
                    v-model="srcMerchantNo"
                    clearable
                    placeholder="请输接受转账个人钱包"
                ></el-input>
              </div>
            </div>
          </div>

          <div class="block-bottom">
            <div
              class="bottom"
              v-for="(item, index) in 2"
              :key="index"
              @click="transferFunction(index)"
            >
              {{ index == 0 ? "重置" : "提交" }}
            </div>
          </div>




          <!-- <div class="block-checkout" @click="transferCheckoutMet">
            <img
              class="checkout-img"
              :src="
                transferCheckout == false
                  ? require('../../assets/index/icon-15.png')
                  : require('../../assets/index/icon-14.png')
              "
              alt=""
            />

            <div class="checkout-title">
              我已经阅读并同意
              <span
                style="
                  margin-left: 5px;
                  color: #2588fa;
                  text-decoration: underline;
                "
                @click.stop="zhifuStop"
                >支付协议</span
              >
            </div>
          </div> -->
        </div>
      </el-dialog>
    </div>

    <!--转账-->
    <div class="transfer">
      <el-dialog title="" :visible.sync="transferDialogVisible2" round>
        <div class="transfer-block">
          <div class="block-header">
            <div class="header-title">转账到平台</div>
            <img
                @click="transferClose2"
                class="header-close"
                src="../../assets/index/icon-11.png"
                alt=""
            />
          </div>

          <div class="block-center">
            <div class="center-list" v-for="(item, index) in 3" :key="index">
              <div class="list-left">
                {{ index == 0 ? "子商户号" : index == 1 ? "转账金额" : "" }}
              </div>
              <div class="list-right">
                <el-input
                    v-if="index == 0"
                    v-model="payerMerchantNo"
                    readonly
                    clearable
                    placeholder="请输入子商户号"
                ></el-input>
                <el-input
                    v-if="index == 1"
                    v-model="transferPrice"
                    @input="
                    transferPrice = transferPrice.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
                  "
                    clearable
                    placeholder="请输入转账金额"
                ></el-input>
              </div>
            </div>
          </div>

          <div class="block-bottom">
            <div
                class="bottom"
                v-for="(item, index) in 2"
                :key="index"
                @click="merchantPlatorm(index)"
            >
              {{ index == 0 ? "重置" : "提交" }}
            </div>
          </div>




          <!-- <div class="block-checkout" @click="transferCheckoutMet">
            <img
              class="checkout-img"
              :src="
                transferCheckout == false
                  ? require('../../assets/index/icon-15.png')
                  : require('../../assets/index/icon-14.png')
              "
              alt=""
            />

            <div class="checkout-title">
              我已经阅读并同意
              <span
                style="
                  margin-left: 5px;
                  color: #2588fa;
                  text-decoration: underline;
                "
                @click.stop="zhifuStop"
                >支付协议</span
              >
            </div>
          </div> -->
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Bus from "../../utils/bus";

var throttle = require("../../utils/throttle");

import {
  getMerchantList,
  merchantInner,
  queryMerchant,
  contractSign,
  uploadUrl,
  queryMerchantInfo,
  addMechant,
  insertMerchant, merchantPlatorm,
} from "../../api/merchant";

export default {
  data() {
    return {
      ///-----------第一区域
      merchantNo: "",
      merchantName: "",
      merchantType: "",
      //------------第二区域
      tableData: [],
      multipleSelection: [],
      multipleSelectionTotal: 0,
      multipleSelectionPrice: 0,
      totalNum: 0,
      page: 1,
      limit: 10,

      //---------转账
      transferDialogVisible: false,
      transferDialogVisible2: false,
      payerMerchantNo: "",
      transferPrice: "",
      srcMerchantNo:"",
      transferWay: "",
      transferOptions: [],
      transferCheckout: true,
      //----------新增弹出框区域
      addtionDialogVisible: false,
      addModel: {
        businessPicUrl: "",
        accountCardPicFrontUrl: "",
        lawyerIdPicFrontUrl: "",
        lawyerIdPicBackUrl: "",
        lawyerIdHandFrontUrl: "",
        doorFrontPicUrl: "",
        cashierPicUrl: "",
        scenePicUrl: "",
      },
      merchantTypesOptions: [
        //   {
        //   label: "个体商户",
        //  value: "01",
        //},
        {
          label: "企业商户",
          value: "02",
        },
        {
          label: "小微商户",
          value: "03",
        },
      ],
      lawyerWorkOptions: [
        {
          label: "机关团体企事业单位",
          value: "1",
        },
        {
          label: "公共事业",
          value: "2",
        },
        {
          label: "农牧业",
          value: "3",
        },
        {
          label: "交通运输业",
          value: "4",
        },
        {
          label: "餐旅业",
          value: "5",
        },
        {
          label: "建筑工程业",
          value: "6",
        },
        {
          label: "制造业",
          value: "7",
        },
        {
          label: "医疗保健业",
          value: "8",
        },
        {
          label: "娱乐业",
          value: "9",
        },
        {
          label: "其他",
          value: "10",
        },
      ],
      lawyerSexOptions: [
        {
          label: "男",
          value: "01",
        },
        {
          label: "女",
          value: "02",
        },
      ],
      lawyerIdTypeOptions: [
        {
          label: "身份证",
          value: "00",
        },
        {
          label: "中国护照",
          value: "01",
        },
        {
          label: "军人身份证",
          value: "02",
        },
        {
          label: "警官证",
          value: "03",
        },
        {
          label: "户口簿",
          value: "04",
        },
        {
          label: "临时身份证",
          value: "05",
        },
        {
          label: "外国护照",
          value: "06",
        },
        {
          label: "港澳通行证",
          value: "07",
        },
        {
          label: "台胞通行证",
          value: "08",
        },
        {
          label: "其他证件",
          value: "18",
        },
        {
          label: "营业执照",
          value: "19",
        },
      ],
      accountCardTypeOptions: [
        {
          label: "对私借记卡",
          value: "11",
        },
        {
          label: "对公借记卡",
          value: "21",
        },
      ],
      settleTypeOptions: [
        {
          label: "银行账户(自动结算到银行账户)",
          value: "01",
        },
        {
          label: "平台内账户(自动结算到一般消费账户，需调用接口提现到银行账户)",
          value: "02",
        },
      ],
      prewUrlList: [],
      isAdd: 0,
      rules: {
        merchantType: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        merchantName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        merchantShortName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        businessCode: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        businessName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        businessExpire: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        businessFailure: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        businessAddress: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        bizAddress: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        province: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        city: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        region: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerPhone: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerId: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerIdExpired: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerIdFailure: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerCountry: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerWork: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        lawyerSex: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        lawyerAddress: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        lawyerIdType: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        accountCardType: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        accountCardno: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        accountCardnoName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        openAccProvince: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        openAccCity: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        openAccArea: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        openAccBanktype: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        personName: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        personId: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        personPhone: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        personEmail: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        personAddress: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        mccCode: [
          { required: true, message: "输入内容不能为空", trigger: "blur" },
        ],
        settleType: [
          { required: true, message: "输入内容不能为空", trigger: "change" },
        ],
        businessPicUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        accountCardPicFrontUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        lawyerIdPicFrontUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        lawyerIdPicBackUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        lawyerIdHandFrontUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        doorFrontPicUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        cashierPicUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
        scenePicUrl: [
          { required: true, message: "上传内容不能为空", trigger: "blur" },
        ],
      },
      //-------
      loading: false,
      loadings: false,
      walletShow: false,
    };
  },
  created() {
    setTimeout(() => {
      this.walletShow = this.$store.state.pageFunctionShow;
    }, 500);
    this.loadData();
    /*let obj={
      key:
      value:
    }*/
  },
  methods: {
    // 钱包
    loadData() {
      let params = {
        merchantNo: this.merchantNo,
        merchantName: this.merchantName,
        merchantType: this.merchantType,
        pageNo: this.page,
        pageSize: this.limit,
      };

      getMerchantList(params).then((res) => {
        if (res.resultStatus == true) {
          this.tableData = res.resultData.list;
          this.totalNum = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },

    walletFunction(index) {
      this.loading = true;
      if (index == 0) {
      } else {
        this.merchantNo = "";
        this.merchantName = "";
        this.merchantType = "";
        this.multipleSelectionTotal = 0;
      }

      this.loadData();
    },
    // 表格区域点击选中 勾选对应的
    handleSelectionChange(val) {
      let price = 0;

      val.forEach((item, index) => {
        price = Number(price) + Number(item.money);
      });

      this.multipleSelectionTotal = val.length;
      this.multipleSelectionPrice = price;
      this.multipleSelection = val;
    },
    // 点击监听排序
    sortChange(e) {},

    walletOperation(index, item) {
      if (this.walletShow == false) {
        this.$message.error("暂无权限!");
        return;
      }

      if (index == 0) {
        this.transferPrice = "";
        this.srcMerchantNo="";
        this.payerMerchantNo = item.merchantNo;

        this.transferDialogVisible = true;
      } else if (index == 1) {
        let obj = {
          merchantNo: item.merchantNo,
        };
        Bus.$emit("log", "merchantDetails", obj);
      } else if (index == 2) {
        this.loadings = true;
        let params = {
          id: item.id,
        };

        queryMerchant(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.$message.success("查询成功！");
            this.loadData();
          }
        });
      } else if (index == 3) {
        this.loadings = true;
        let params = {
          id: item.id,
        };

        contractSign(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.$message.success("签约请求发生成功请查看手机！");
            this.transferDialogVisible = false;
            this.loadData();
          }
        });
      } else if (index == 4) {
        this.loadings = true;
        let params = {
          id: item.id,
        };

        queryMerchantInfo(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.addModel = res.resultData;
            this.isAdd = res.resultData.isAdd;
            this.addtionDialogVisible = true;
          }
        });
      } else if (index == 5) {
        this.loadings = true;
        let params = {
          id: item.id,
        };

        addMechant(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.$message.success("商户进件成功！");
            this.loadData();
          }
        });
      }
     else if (index == 6) {
        this.transferPrice = "";
        this.srcMerchantNo = "";
        this.payerMerchantNo = item.merchantNo;

        this.transferDialogVisible2 = true;
      }
    },

    handleSuccessList(response, file, fileList, url, pic, refName) {
      this.$nextTick(() => {
        this.$refs[refName].clearFiles();
      });
      let picUrl = response.resultData;
      let params = {
        frontPicUrl: response.resultData,
      };

      uploadUrl(params).then((res) => {
        if (res.resultStatus == true) {
          this.addModel[url] = picUrl;
          this.addModel[pic] = response.resultData;
        }
      });
    },

    //----------转账
    transferClose() {
      this.transferDialogVisible = false;
    },
    transferClose2() {
      this.transferDialogVisible2 = false;
    },
    // 新增
    walletMet(index) {
      if (this.walletShow == false) {
        this.$message.error("暂无权限!");
        return;
      }

      if (index == 0) {
        this.addtionDialogVisible = true;
        this.addModel = {
          businessPicUrl: "",
          accountCardPicFrontUrl: "",
          lawyerIdPicFrontUrl: "",
          lawyerIdPicBackUrl: "",
          lawyerIdHandFrontUrl: "",
          doorFrontPicUrl: "",
          cashierPicUrl: "",
          scenePicUrl: "",
        };

        this.isAdd = 0;
      }
    },
    transferFunction(index) {
      if (index == 0) {
        this.transferDialogVisible = false;
      } else {
        if (this.transferCheckout == false) {
          this.$message.warning("请先勾选协议");

          return;
        }

        this.loadings = true;
        let params = {
          amount: this.transferPrice,
          payerMerchantNo: this.payerMerchantNo,
          srcMerchantNo:this.srcMerchantNo,
        };

        merchantInner(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.$message.success("转账成功！");
            this.transferDialogVisible = false;
            this.loadData();
          }
        });
      }

      this.transferDialogVisible = false;
    },
    merchantPlatorm(index) {
      if (index == 0) {
        this.transferDialogVisible = false;
      } else {
        if (this.transferCheckout == false) {
          this.$message.warning("请先勾选协议");

          return;
        }

        this.loadings = true;
        let params = {
          amount: this.transferPrice,
          payerMerchantNo: this.payerMerchantNo,
          srcMerchantNo:this.srcMerchantNo,
        };

        merchantPlatorm(params).then((res) => {
          if (res.resultStatus == true) {
            this.loadings = false;
            this.$message.success("转账成功！");
            this.transferDialogVisible2 = false;
            this.loadData();
          }
        });
      }

      this.transferDialogVisible2 = false;
    },
    //---------新增
    //----预览
    previewMet(item, index) {
      if (item == "") {
        return;
      }
      this.prewUrlList.push(item);
      let str = "download" + index;
      this.$refs[str].clickHandler();
    },
    addtionClose() {
      this.addtionDialogVisible = false;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loadings = true;
          insertMerchant(this.addModel).then((res) => {
            if (res.resultStatus == true) {
              this.loadings = false;
              this.$message.success("成功确认信息无误后再进件！");
              this.addtionDialogVisible = false;
              this.loadData();
            } else {
              this.$message.error(res.errorMessage);
            }
          });
        } else {
          console.log("验证失败");
          return false;
        }
      });
    },

    transferCheckoutMet() {
      this.transferCheckout = !this.transferCheckout;
    },

    //  查询当前页码多少条
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.loadData();
    },
    //  查询当前页
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.loadData();
    },
  },
};
</script>

<style lang="less" scoped>
.display-list {
  .list-download {
    width: 100%;
    height: 200px;
  }
}

/deep/ .el-form-item__content {
  display: flex;
  width: 60%;
}

/deep/ .el-form-item__label {
  width: 150px;
}

/deep/ .el-select {
  width: 100%;
}

.external {
  .first {
    .first-top {
      display: flex;
      align-items: center;
      .top-list {
        display: flex;
        align-items: center;
        margin-right: 12px;

        .list-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #757575;
          margin-right: 12px;
        }

        .list-input {
          /deep/ .el-input__inner {
            width: 174px;
            height: 38px;
            background: #ffffff;
            border-radius: 4px;
          }
        }
      }

      .top-button {
        display: flex;
        align-items: center;

        .button {
          width: 66px;
          height: 38px;
          background: #2588fa;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          cursor: pointer;
          border: 1px solid #2588fa;
        }

        .button:last-child {
          background: #ffffff;
          color: #949494;
          margin-left: 12px;
          border: 1px solid #dedede;
        }
      }
    }

    .first-center {
      margin-top: 15px;
      display: flex;
      align-items: center;

      .center {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        padding: 0 14px;
        box-sizing: border-box;
        height: 38px;
        background: #2588fa;
        border-radius: 4px;
        cursor: pointer;

        .center-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
        }

        .center-img {
          width: 12px;
          height: 12px;
          margin-right: 8px;
        }
      }
    }

    .first-bottom {
      margin-top: 16px;
      display: flex;
      align-items: center;
      height: 38px;
      background: #edf5ff;
      border-radius: 4px;
      border: 1px solid #aed4ff;
      padding: 0 16px;
      box-sizing: border-box;

      .bottom-img {
        width: 14px;
        height: 14px;
        margin-right: 11px;
      }

      .bottom-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
        margin-right: 17px;
      }
    }
  }

  .second {
    margin-top: 16px;
    .second-table {
      /deep/ .el-table thead {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #949494;
      }

      /deep/ .el-table tr {
        height: 46px;
      }

      /deep/ .el-table__empty-text {
        line-height: 0;
      }

      /deep/ .el-table .el-table__cell {
        padding: 0;
      }

      .empty-block {
        margin-top: 62px;
        padding-bottom: 40px;

        .empty-block-img {
          width: 130px;
          height: 130px;
          margin: 0 auto;
        }

        .empty-block-text {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          margin-top: 10px;
          height: 17px;
          line-height: 17px;
        }
      }

      .operation {
        display: flex;
        align-items: center;
        justify-content: center;

        .operation-list {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2588fa;
          text-decoration: underline;
          cursor: pointer;
          margin-right: 16px;
        }
      }
    }

    .second-pagination {
      height: 75px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pagination-left {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #949494;
      }

      .pagination-right {
        /deep/ .el-pagination .btn-prev {
          padding: 0;
          width: 30px;
          height: 30px;
          background: #f4f5f9;
          border-radius: 2px;
          border: 1px solid #d9d9d9;
          margin-right: 8px;
        }

        /deep/ .el-pagination .btn-next {
          padding: 0;
          width: 30px;
          height: 30px;
          background: #f4f5f9;
          border-radius: 2px;
          border: 1px solid #d9d9d9;
        }

        /deep/ .el-pager li {
          padding: 0;
          width: 30px;
          height: 30px;
          border-radius: 2px;
          background: #f4f5f9;
          border: 1px solid #d9d9d9;
          line-height: 30px;
          margin-right: 8px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #949494;
        }

        /deep/ .el-pager li.active {
          background: #2588fa;
          color: #ffffff;
        }

        /deep/ .el-input--mini .el-input__inner {
          height: 30px;
          background: #f4f5f9;
        }

        /deep/ .el-input__inner {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
        }
      }
    }
  }

  .addtion {
    /deep/ .el-dialog {
      width: 456px;

      border-radius: 6px;
    }

    /deep/ .el-dialog__body {
      padding: 0;
      padding-bottom: 20px;
    }

    .addtion-block {
      background: #ffffff;
      .block-header {
        height: 48px;
        border-radius: 10px 10px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #f8f8f8;

        .header-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #292929;
        }

        .header-close {
          position: absolute;
          right: 20px;
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin-top: 5px;
        }
      }

      .block-center {
        margin-top: 20px;
        padding: 0 23px;
        box-sizing: border-box;

        .center-list {
          display: flex;
          align-items: center;
          height: 38px;
          margin-bottom: 12px;

          .list-left {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            width: 25%;
            text-align: right;
            margin-right: 2%;
          }

          .list-right {
            width: 83%;

            /deep/ .el-input__inner {
              width: 100%;
              height: 38px;
              background: #ffffff;
              border-radius: 4px;
            }
          }
        }
      }

      .block-bottom {
        padding: 0 23px 20px;
        box-sizing: border-box;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .bottom {
          cursor: pointer;
          width: 72px;
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #dedede;
          display: flex;
          justify-content: center;
          align-items: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #949494;
        }

        .bottom:last-child {
          background: #2588fa;
          color: #ffffff;
          margin-left: 12px;
          border: 1px solid #2588fa;
        }
      }
    }
  }

  .list-uploading {
    width: 138px;
    height: 38px;
    background: #2588fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: 0 auto;
    cursor: pointer;

    .uploading-img {
      width: 12px;
      height: 12px;
    }

    .uploading-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      margin-left: 4px;
    }
  }

  .identity {
    /deep/ .el-dialog {
      width: 456px;
      // min-height: 300px;
      background: #ffffff;
      border-radius: 6px;
    }

    /deep/ .el-dialog__body {
      padding: 0;
    }

    .identity-block {
      background: #fff;

      .block-header {
        height: 48px;
        border-radius: 10px 10px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #f8f8f8;

        .header-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #292929;
        }

        .header-close {
          position: absolute;
          right: 20px;
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin-top: 5px;
        }
      }

      .block-center {
        margin-top: 20px;
        padding: 0 23px;
        box-sizing: border-box;

        .center-list {
          display: flex;
          align-items: center;
          height: 38px;
          margin-bottom: 12px;

          .list-left {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            width: 20%;
            text-align: right;
            margin-right: 2%;
          }

          .list-right {
            width: 78%;

            /deep/ .el-input__inner {
              width: 100%;
              height: 38px;
              background: #ffffff;
              border-radius: 4px;
            }
          }
        }

        .center-display {
          margin-top: 25px;
          display: flex;
          align-items: center;

          .display-list {
            // width: 50%;

            .list-download {
              // width: 100px;
              // height: 110px;
              object-fit: contain;
              margin-bottom: 11px;
            }

            /deep/ .el-upload--picture-card {
              width: 138px;
              height: 38px;
              line-height: 38px;
              border: none;
            }

            .display-upload {
              display: flex;
              height: 38px;
              justify-content: center;
            }
          }

          .display-list:last-child {
            margin-left: 24px;
          }
        }
      }

      .block-bottom {
        background: #fff;
        padding: 0 23px 23px;
        box-sizing: border-box;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .bottom {
          cursor: pointer;
          width: 72px;
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #dedede;
          display: flex;
          justify-content: center;
          align-items: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #949494;
        }

        .bottom:last-child {
          background: #2588fa;
          color: #ffffff;
          margin-left: 12px;
          border: 1px solid #2588fa;
        }
      }
    }
  }

  .transfer {
    /deep/ .el-dialog {
      width: 494px;
      border-radius: 6px;
    }

    /deep/ .el-dialog__body {
      padding: 0;
    }

    .transfer-block {
      background: #ffffff;

      .block-header {
        height: 48px;
        border-radius: 10px 10px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #f8f8f8;

        .header-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #292929;
        }

        .header-close {
          position: absolute;
          right: 20px;
          width: 14px;
          height: 14px;
          cursor: pointer;
          margin-top: 5px;
        }
      }

      .block-center {
        margin-top: 20px;
        padding: 0 23px;
        box-sizing: border-box;

        .center-list {
          display: flex;
          align-items: center;
          height: 38px;
          margin-bottom: 12px;

          .list-left {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            width: 20%;
            text-align: right;
            margin-right: 2%;
          }

          .list-right {
            width: 78%;

            /deep/ .el-input__inner {
              width: 100%;
              height: 38px;
              background: #ffffff;
              border-radius: 4px;
            }

            /deep/ .el-select {
              width: 100%;
            }
          }
        }
      }

      .block-bottom {
        padding: 0 23px 20px;
        box-sizing: border-box;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .bottom {
          cursor: pointer;
          width: 72px;
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #dedede;
          display: flex;
          justify-content: center;
          align-items: center;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #949494;
        }

        .bottom:last-child {
          background: #2588fa;
          color: #ffffff;
          margin-left: 12px;
          border: 1px solid #2588fa;
        }
      }

      .block-checkout {
        padding: 0 23px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-top: 15px;
        cursor: pointer;
        justify-content: flex-end;

        .checkout-img {
          width: 12px;
          height: 12px;
          margin-right: 4px;
        }

        .checkout-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #a3a3a3;
        }
      }
    }
  }
}
</style>
